<template>
	<view>
		<u-mask :show="helpshow" @click="helpshow = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="helpLogo">
						<image src="../../static/ceshi/logistics.png" mode=""></image>
					</view>
					<view class="helpKuang">
						<image src="https://lovebirdopen.com/static/img/wineTasting/jiuping.png" mode=""></image>
						<view class="helpTitle">
							我正在参与活动
							点击卡片帮我攒酒
						</view>
					</view>
					<image class="helptt" src="https://lovebirdopen.com/static/img/wineTasting/helptt.png" mode=""></image>
					<view class="helpp">
						有机会免费品酒
					</view>
					<view class="help_hongbao">
						<image src="https://lovebirdopen.com/static/img/wineTasting/hongbao.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-mask>
		
		<u-mask :show="helpshow" @click="helpshow = false"> 第二种模式 
			<view class="warp">
				<view class="rect" @tap.stop v-show="onshow">
					<image class="help_s" src="https://lovebirdopen.com/static/img/wineTasting/help20.png" mode=""></image>
					<view class="help_q">
						有机会免费品酒
					</view>
					<view class="helpHongTwo">
						<image src="https://lovebirdopen.com/static/img/wineTasting/help21.png" mode=""></image>
					</view>
					<view class="helpButtom">
						我也要免费喝酒
					</view>
				</view>
			</view>
		</u-mask>
		
		<u-mask :show="helpshow" @click="helpshow = false">   第三种模式 
			<view class="warp">
				<view class="rect" @tap.stop v-show="onshow">
					<image class="help_s" src="https://lovebirdopen.com/static/img/wineTasting/help20.png" mode=""></image>
					<view class="help_q">
						有机会免费品酒
					</view>
					<view class="helpHongTwo">
						<image src="https://lovebirdopen.com/static/img/wineTasting/help21.png" mode=""></image>
					</view>
					<view class="helpButtom">
						去邀请好友助力
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				helpshow: true,
			}
		}
	}
</script>

<style  lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 556rpx;
		height: 70%;
		// background-color: #fff;
		position: relative;
	}
	.helpLogo{
		height: 120rpx;
		width: 120rpx;
		margin: 0 auto;
		border: 1px solid #988F81;
		border-radius: 50%;
		position: absolute;
		top: 4%;
		left: 50%;
		z-index: 1;
		transform: translate(-50% , -50%);
		overflow: hidden;
		
		image{
			height: 100%;
			width: 100%;
		}
	}
	.helpKuang{
		    height: 170rpx;
		    width: 86%;
		    position: absolute;
		    top: 18%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    border: 1px solid #988f81;
		    box-sizing: border-box;
		    border-radius: 16rpx;
		    display: flex;
		    justify-content: space-around;
		    align-items: center;
		
		image{
			height: 120rpx;
			width: 40rpx;
		}
		.helpTitle{
			height: 108rpx;
			width: 214rpx;
			color: #fff;
			font-size: 26rpx;
			margin-left: -140rpx;
			line-height: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			speak: digits;
			text-align: center;
		}
	}
	.helptt{
		height: 70rpx;
		width: 504rpx;
		position: absolute;
		top: 36%;
		left: 50%;
		transform: translate(-50% , -50%);
	}
	.helpp{
		// height: 34rpx;
		width: 274rpx;
		font-family: Microsoft YaHei UI;
		font-size: 36rpx;
		position: absolute;
		top: 44%;
		left: 50%;
		transform: translate(-50% , -50%);
		text-align: center;		
		color: #ECDEB3;
	}
	.help_hongbao{
		height: 408rpx;
		width: 360rpx;
		position: absolute;
		top: 76%;
		left: 50%;
		transform: translate(-50% , -50%);
		image{
			height: 100%;
			width: 100%;
		}
	}
	
	.helpButtom{
		height: 88rpx;
		width: 384rpx;
		color:rgba(194,8,0,1);
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
		line-height: 88rpx;
		position: absolute;
		top: 88%;
		left: 50%;
		transform: translate(-50% , -50%);
		background: linear-gradient(180deg, #FDF59F 0%, #FDF59F 0.52%, #FAD251 35.94%, #F7BD2D 81.77%, #FAD660 100%);
		box-shadow: 0px 8rpx 1rpx #520F11;
		border-radius: 16rpx;
	}
	.help_s{
		height: 70rpx;
		width: 504rpx;
		position: absolute;
		top: 6%;
		left: 50%;
		transform: translate(-50% , -50%);
	}
	.help_q{
		// height: 34rpx;
		width: 274rpx;
		font-family: Microsoft YaHei UI;
		font-size: 36rpx;
		position: absolute;
		top: 15%;
		left: 50%;
		transform: translate(-50% , -50%);
		text-align: center;		
		color: #ECDEB3;
	}
	.helpHongTwo{
		height: 408rpx;
		width: 360rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50% , -50%);
		image{
			height: 100%;
			width: 100%;
		}
	}
</style>
